<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<!--后台管理端菜单-->
<template>
  <template v-for="item in menu">
    <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item) && item.nav ==0 && item.hide==0"
                  :index="getPath(item)"
                  @click="open(item)"
                  :key="item[labelKey]">
      <i :class="item[iconKey]"></i>
      <template #title>
        <span :alt="item[pathKey]">{{getTitle(item)}}</span>
      </template>
    </el-menu-item>
    <el-sub-menu v-else-if="!validatenull(item[childrenKey])&&validRoles(item)&& item.nav ==0 && item.hide==0"
                 :index="getPath(item)"
                 :key="item[labelKey]">
      <template #title>
        <i :class="item[iconKey]"></i>
        <span>{{getTitle(item)}}</span>
      </template>
      <template v-for="(child,cindex) in item[childrenKey]"
                :key="child[labelKey]">
        <el-menu-item :index="getPath(child)"
                      @click="open(child)"
                      v-if="validatenull(child[childrenKey]) && child.nav ==0 && child.hide==0" >
          <i :class="child[iconKey]"></i>
          <template #title>
            <span>{{getTitle(child)}}</span>
          </template>
        </el-menu-item>
        <sidebar-item v-else
                      :menu="[child]"
                      :key="cindex"></sidebar-item>
      </template>
    </el-sub-menu>
  </template>
</template>
<script>
import { mapGetters } from "vuex";
import { validatenull } from '@/framework-core/utils/validate'
import website from '@/framework-core/config/website'
import { hasMobile } from '@/framework-core/utils/util'

export default {
  name: "sidebarItem",
  data () {
    return {
      props: website.menu
    }
  },
  props: {
    menu: Array
  },
  computed: {
    ...mapGetters([ "isCollapse","setting","roles"]),
    labelKey () {
      return this.props.label
    },
    pathKey () {
      return this.props.path
    },
    queryKey () {
      return this.props.query
    },
    iconKey () {
      return this.props.icon
    },
    childrenKey () {
      return this.props.children
    }
  },
  methods: {
    validatenull,
    getPath (item) {
      return item[this.pathKey]
    },
    getTitle (item) {
      return this.$router.$avueRouter.generateTitle(item, this.props)||item.name;
    },
    validRoles (item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    open (item) {
      if(hasMobile()){
        this.$store.commit("SET_COLLAPSE");

      }
      // let url = item[this.pathKey];
      // if(url.indexOf("http")>=0){
      //   window.open(url, '_blank');
      //   return
      // }
      let link = "0"

      if(item.meta) {
        try {
          let meta = JSON.parse(item.meta);
          link = meta.link
        }catch (err){

        }
      }

      if(link === "1"){
        this.$router.push({
          path: "/iframe",
          query: {url:item[this.pathKey],"name":this.getTitle(item)},
        });
        return
      }
      if(link === "2"){
        let protocol = window.location.protocol; // 获取协议，例如 "https:"
        let hostname = window.location.hostname; // 获取域名，例如 "localhost"
        let port = window.location.port ? `:${window.location.port}` : ''; // 获取端口，例如 ":8080" 或空字符串 ""
        let basePath = ''; // 你的本地服务路径部分
        let localServiceUrl = `${protocol}//${hostname}${port}${basePath}`;
        this.$router.push({
          path: "/iframe",
          query: {url:localServiceUrl+item[this.pathKey],"name":this.getTitle(item)},
        });
        return
        return
      }
      this.$router.push({
        path: item[this.pathKey],
        query: item[this.queryKey]
      });

    }
  }
};
</script>

